<template>
	<view style="width:96%;margin-left:2%;">
		<view style="width:100%;float:left;">
			<view style="width:100%;height:30px;margin-top:10px;line-height:30px;color:crimson;font-weight:bold;font-size:18px;">
				<span style="margin-left:10px;">特价商品</span>
			</view>
			<view @click="toDIYView(item.id)" v-for="(item, index) in HandworkDiyListByOffer" :key="index" class="card">
				<view style="width:100%;height: 140px;">
					<img style="width:80%;height:110px;margin-left:10%;margin-top:15px;border-radius:20px;" :src="'http://101.43.223.224:8765/image/getImageById?id='+item.diyImageId">
				</view>
				<view style="width:100%;height: 60px;">
					<view style="width:80%;height: 20px;margin-left:10%;text-align:center;overflow:hidden;word-break:break-all;">
						<span style="font-size:14px;">价格：</span>
						<span style="font-size:14px;">￥</span>
						<span style="font-size:18px;color:crimson;font-weight:bold;">{{item.diyFavorablePrice}}</span>
					</view>
					<view style="width:80%;height: 20px;margin-left:10%;margin-top:10px;text-align:center;overflow:hidden;word-break:break-all;">
						<span style="font-size:14px;">推荐人数：</span>
						<span style="font-size:14px;">{{item.recommendedPeopleNumber}}</span>
					</view>
					<view style="width:80%;height: 20px;margin-left:10%;margin-top:10px;text-align:center;overflow:hidden;word-break:break-all;">
						<span style="font-size:14px;">推荐场景：</span>
						<span style="font-size:14px;">{{item.recommendedScenarios}}</span>
					</view>
				</view>
			</view>
		</view>
		<view style="width:100%;float:left;">
			<view style="width:100%;height:30px;margin-top:10px;line-height:30px;color:crimson;font-weight:bold;font-size:18px;">
				<span style="margin-left:10px;">特色商品</span>
			</view>
			<view @click="toDIYView(item.id)" v-for="(item, index) in HandworkDiyListByCharacteristic" :key="index" class="card">
				<view style="width:100%;height: 140px;">
					<img style="width:80%;height:110px;margin-left:10%;margin-top:15px;border-radius:20px;" :src="'http://101.43.223.224:8765/image/getImageById?id='+item.diyImageId">
				</view>
				<view style="width:100%;height: 60px;">
					<view style="width:80%;height: 20px;margin-left:10%;text-align:center;overflow:hidden;word-break:break-all;">
						<span style="font-size:14px;">价格：</span>
						<span style="font-size:14px;">￥</span>
						<span style="font-size:18px;color:crimson;font-weight:bold;">{{item.diyFavorablePrice}}</span>
					</view>
					<view style="width:80%;height: 20px;margin-left:10%;margin-top:10px;text-align:center;overflow:hidden;word-break:break-all;">
						<span style="font-size:14px;">推荐人数：</span>
						<span style="font-size:14px;">{{item.recommendedPeopleNumber}}</span>
					</view>
					<view style="width:80%;height: 20px;margin-left:10%;margin-top:10px;text-align:center;overflow:hidden;word-break:break-all;">
						<span style="font-size:14px;">推荐场景：</span>
						<span style="font-size:14px;">{{item.recommendedScenarios}}</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部提示 -->
		<view style="width: 100%;margin-top: 30px;float: left;">
			<view style="width: 37.6%;float: left;">
				<u-line color="grey"></u-line>
			</view>
			<view style="float: left;margin-left: 2.5%;margin-right: 2%;font-size: 14px;position: relative;top: -10px;color: grey;">已经到底了</view>
			<view style="width: 37.5%;float: left;">
				<u-line color="grey"></u-line>
			</view>
		</view>
		<view style="width: 100%;height: 50px;float: left;"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 特价DIY商品
				HandworkDiyListByOffer:[],
				// 特色DIY商品
				HandworkDiyListByCharacteristic: [],
			}
		},
		onLoad(){
			this.getHandworkDiyListByOffer()
			this.getHandworkDiyListByCharacteristic()
		},
		methods: {
			// 特价商品
			getHandworkDiyListByOffer(){
				this.$myRequest({
					url: '/handworkDiy/getHandworkDiyListByOffer'
				}).then(res => {
					this.HandworkDiyListByOffer = res.data.data
				})
			},
			// 特色商品
			getHandworkDiyListByCharacteristic(){
				this.$myRequest({
					url: '/handworkDiy/getHandworkDiyListByCharacteristic'
				}).then(res => {
					this.HandworkDiyListByCharacteristic = res.data.data
				})
			},
			toDIYView(id){
				uni.navigateTo({
					url: '/pages/diy/DIYView?id='+id
				})
			}
		}
	}
</script>
<style>
	.card {
		margin-left:5px;
		margin-right:5px;
		float:left;
		margin-top: 10px;
		width: 170px;
		height: 234px;
		border-radius: 20px;
		background: #e0e0e0;
		box-shadow: 15px 15px 30px #bebebe,-15px -15px 30px #ffffff;
	}
</style>
